<template>
    <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item>
            <el-select v-model="formData.vendorId" placeholder="Select">
                <el-option v-for="item in vendorData" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-input v-model="formData.poId" placeholder="请输入采购单关键字" clearable />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onQuery">查询</el-button>
        </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="id" label="ID" width="185" />
        <el-table-column fixed prop="vendorName" label="供应商" width="120" />
        <el-table-column prop="poDate" label="采购日期" width="120" />
        <el-table-column prop="totalPrice" label="总价" width="80" />

        <el-table-column prop="statusX" label="状态" width="120">
            <template #default="scope">
                <el-tag :type="scope.row.status === 1 ? '' : scope.row.status === 5 ? 'success' : scope.row.status === 10 ?
                    'warning' : scope.row.status === 15 ? 'success' : scope.row.status === 50 ? 'info' : 'danger'">
                    {{ scope.row.statusX}}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="lastUpdateBy" label="最近更新人" width="120" :formatter="formatter" />
        <el-table-column prop="lastUpdateTime" label="时间" width="180" :formatter="formatter" />
        <el-table-column fixed="right" label="操作" width="150">
            <template #default="scope">
                <el-button type="primary" size="small" @click="edit(scope.row)">查看</el-button>
            </template>
        </el-table-column>
    </el-table>
    <br>
    <el-pagination background layout="prev, pager, next" :total="pageData.total" :page-size="pageData.pageSize"
        @current-change="pageChange" />
</template>
<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue'
import { vendorApi, poApi } from '@/api'

import dayjs from 'dayjs'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
const tableData = ref([

])
const vendorData = ref([])
const categoryData = ref([
    {
        value: 0,
        label: '一级分类',
    }
])

const pageData = reactive({
    total: 0,
    pageSize: 3,
    pageNum: 1
})
const formData = reactive({
    vendorId: 0,
    poId: ''
})
onMounted(() => {
    callVendorApi()
})
const callVendorApi = () => {
    vendorApi.select.call().then((res) => {
        vendorData.value = res
        formData.vendorId = res[0].id
    })
}
const edit = (row: any) => {
    router.push({ name: "po-edit", query: { id: row.id } })
}

const formatter = (row, column, cellValue, index) => {
    // console.log(cellValue);
    if (column.property == "lastUpdateTime") {
        return dayjs(cellValue).format('YYYY-MM-DD HH:mm')
    }
    if (column.property == "lastUpdateBy") {
        return cellValue + " 先生"
    }

}


const pageChange = (val: number) => {
    pageData.pageNum = val
    callpoApi()
    // console.log(val);

}


const callpoApi = () => {
    let poId = formData.poId != "" ? formData.poId : undefined
    let pageNum = pageData.pageNum
    let pageSize = pageData.pageSize

    poApi.select.call({ id: poId, pageNum, pageSize }).then((res: any) => {
        // console.log(res);
        pageData.total = res.total
        tableData.value = res.items


    })
}
const onQuery = () => {
    callpoApi()
}
</script>